<!--
=========================================================
* Material Dashboard 2 - v3.0.0
=========================================================

* Product Page: https://www.creative-tim.com/product/material-dashboard
* Copyright 2021 Creative Tim (https://www.creative-tim.com)
* Licensed under MIT (https://www.creative-tim.com/license)
* Coded by Creative Tim

=========================================================

* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="apple-touch-icon" sizes="76x76" href="/static/image/logo.png">
  <link rel="icon" type="image/png" href="/static/image/logo.png">
  <title>
    NEW ! Welcome
  </title>
  <!--     Fonts and icons     -->
  <link rel="stylesheet" type="text/css"
    href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900|Roboto+Slab:400,700" />
  <!-- Nucleo Icons -->
  <link href="/static/assets/css/nucleo-icons.css" rel="stylesheet" />
  <link href="/static/assets/css/nucleo-svg.css" rel="stylesheet" />
  <!-- Font Awesome Icons -->
  <script src="https://kit.fontawesome.com/42d5adcbca.js" crossorigin="anonymous"></script>
  <!-- Material Icons -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
  <!-- CSS Files -->
  <link id="pagestyle" href="/static/assets/css/material-dashboard.css?v=3.0.0" rel="stylesheet" />
  <link rel="stylesheet" type="text/css" href="/static/assets/css/ele-index.css">
  <link rel="stylesheet" type="text/css" href="/static/my_icon/iconfont.css">
</head>

<body class="">
  <div id='app'>
    <div class="container position-sticky z-index-sticky top-0">
      <div class="row">
        <div class="col-12">
          <!-- Navbar -->
          <nav
            class="navbar navbar-expand-lg blur border-radius-lg top-0 z-index-3 shadow position-absolute mt-4 py-2 start-0 end-0 mx-4">
            <div class="container-fluid ps-2 pe-0">

              <a class="navbar-brand font-weight-bolder ms-lg-0 ms-3 " href="../pages/homePage.html">
                <i class="ni ni-bold-left"></i>
                主页
              </a>
              <button class="navbar-toggler shadow-none ms-2" type="button" data-bs-toggle="collapse"
                data-bs-target="#navigation" aria-controls="navigation" aria-expanded="false"
                aria-label="Toggle navigation">
                <span class="navbar-toggler-icon mt-2">
                  <span class="navbar-toggler-bar bar1"></span>
                  <span class="navbar-toggler-bar bar2"></span>
                  <span class="navbar-toggler-bar bar3"></span>
                </span>
              </button>
              <div class="collapse navbar-collapse" id="navigation">
                <ul class="navbar-nav mx-auto">
                  <li class="nav-item">
                    <a class="nav-link d-flex align-items-center me-2 active" aria-current="page" href="#"
                      id="show_title">
                      HELLO
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </nav>
          <!-- End Navbar -->
        </div>
      </div>
    </div>
    <main class="main-content  mt-0">
      <section>
        <div class="page-header min-vh-100">
          <div class="container">
            <div class="row">
              <div
                class="col-6 d-lg-flex d-none h-100 my-auto pe-0 position-absolute top-0 start-0 text-center justify-content-center flex-column">
                <div
                  class="position-relative bg-gradient-primary h-100 m-3 px-7 border-radius-lg d-flex flex-column justify-content-center"
                  style="background-image: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fphoto%2F2011-10-16%2Fenterdesk.com-7CB92AFE828D7295E2CA6E7FC3BF7B90.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638686886&t=082eefdae4bdf92e98d89fb01098ed4a'); background-size: cover;">
                </div>
              </div>
              <div class="col-xl-4 col-lg-5 col-md-7 d-flex flex-column ms-auto me-auto ms-lg-auto me-lg-5">
                <div class="card card-plain">
                  <div class="card-header">
                    <h4 class="font-weight-bolder">Hi</h4>
                    <p class="mb-0">需要您输入邮箱和密码来注册一个新账号</p>
                  </div>
                  <div class="card-body" v-loading="loading">
                    <form role="form">
                      <div class="input-group input-group-outline mb-3">
                        <label class="form-label">昵称</label>
                        <input type="text" class="form-control" v-model="nick_name" id="nick_name" @input="inputCheck">
                        <i class="el-icon-queding" style="position: absolute; right: 5px;top: 12px;"
                          v-if="nick_name_status===true"></i>
                        <i class="el-icon-shibai" style="position: absolute; right: 5px;top: 12px;"
                          v-if="nick_name_status!==true"></i>
                      </div>
                      <div class="input-group input-group-outline mb-3">
                        <label class="form-label">邮箱</label>
                        <input type="email" class="form-control" @click="email_input" v-model="email" id="email"
                          @input="inputCheck">
                        <i class="el-icon-queding" style="position: absolute; right: 5px;top: 12px;"
                          v-if="email_status===true"></i>
                        <i class="el-icon-shibai" style="position: absolute; right: 5px;top: 12px;"
                          v-if="email_status!==true"></i>
                      </div>
                      <div class="input-group input-group-outline mb-3">
                        <label class="form-label">密码</label>
                        <input type="password" class="form-control" v-model="password" id="password"
                          @input="inputCheck">
                        <i class="el-icon-queding" style="position: absolute; right: 5px;top: 12px;"
                          v-if="password_status===true"></i>
                        <i class="el-icon-shibai" style="position: absolute; right: 5px;top: 12px;"
                          v-if="password_status!==true"></i>
                      </div>
                      <div class="input-group input-group-outline mb-3 gap-2">
                        <label class="form-label" style="height: 40px;">邮箱验证码</label>
                        <input type="text" class="form-control" style="height: 40px;" v-model="email_cache"
                          id="email_cache">
                        <button type="button" class="btn btn-dark btn-sm" style="margin-top: 4px;" hidden="true"
                          id="get_cap" @click="get_cache">获取验证码</button>
                      </div>
                      <div class="form-check form-check-info text-start ps-0">
                        <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" checked>
                        <label class="form-check-label" for="flexCheckDefault">
                          注册即表示同意 <a href="/pages/userInstruction.html/" class="text-dark font-weight-bolder">用户准则</a>
                        </label>
                      </div>
                      <div class="text-center">
                        <button type="button" class="btn btn-lg btn-dark btn-lg w-100 mt-4 mb-0" id="register"
                          @click="mini_register">注册</button>
                      </div>
                      <el-dialog v-loading="loading_image" :title="cache_text" :visible.sync="dialogVisible" width="80%"
                        show-close=false close-on-press-escape="true" close-on-click-modal="false"
                        :before-close="handleClose"
                        style="text-align: center; z-index: 999; width: 400px !important; margin-left: auto; margin-right: auto;">
                        <img id="cache_image" :src="cache_image" />
                        <span slot="footer" class="dialog-footer" style="text-align: center;">
                          <el-button type="primary" @click="refresh_cache" style="width: 100%;">看不清? 换一张</el-button>
                        </span>
                      </el-dialog>
                    </form>
                  </div>
                  <div class="card-footer text-center pt-0 px-lg-2 px-1">
                    <p class="mb-2 text-sm mx-auto">
                      已拥有账号?
                      <a href="/pages/sign-in.html" class="text-primary text-gradient font-weight-bold">登录</a>
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
  </div>

  <!--   Core JS Files   -->
  <script src="/static/assets/js/core/popper.min.js"></script>
  <script src="/static/assets/js/core/bootstrap.min.js"></script>
  <script src="/static/assets/js/plugins/perfect-scrollbar.min.js"></script>
  <script src="/static/assets/js/plugins/smooth-scrollbar.min.js"></script>

  <script src="/static/assets/js/my/jquery.js"></script>
  <script src="/static/assets/js/my/vue.min.js"></script>
  <script src="/static/assets/js/my/vue-router.js"></script>
  <script src="/static/assets/js/my/ele.index.js"></script>
  <script src="/static/js/clickEmoji.js"></script>
  <script>
    // 注册键被按下 触发验证
    function sign_up_down() {

    };
    var win = navigator.platform.indexOf('Win') > -1;
    if (win && document.querySelector('#sidenav-scrollbar')) {
      var options = {
        damping: '0.5'
      }
      Scrollbar.init(document.querySelector('#sidenav-scrollbar'), options);
    }
  </script>
  <!-- Github buttons -->
  <script async defer src="https://buttons.github.io/buttons.js"></script>
  <!-- Control Center for Material Dashboard: parallax effects, scripts for the example pages etc -->
  <script src="/static/assets/js/material-dashboard.min.js?v=3.0.0"></script>
  <!-- vue绑定 -->
  <script>
    new Vue({
      el: '#app',
      data: {
        type_mode: ["success", "info", "warning", "danger", "success", "info", "danger", "warning"],
        cache: false,
        dialogVisible: false,
        mode: "login",
        input1: "",
        input2: "",
        clientHeight: '',
        activeIndex2: 2,
        circleUrl: "/static/image/default.jpg",
        isCollapse: false,  // 控制侧边栏是否关闭 false为不关闭
        visible: false,
        input3: "",
        input4: "",
        input5: "",
        mouse_x: "",
        mouse_y: "",
        cache_x: "",
        cache_y: "",
        cache_status: false,
        cache_image: null,
        cache_uuid: "",
        cache_text: "",
        label1: "",
        label2: "",
        success_uuid: null,
        cache_mode: "2",
        err_no: localStorage.getItem('errno'),
        loading: false,
        loading_image: true,
        nick_name: "",
        nick_name_status: false,
        email: "",
        email_status: false,
        password: "",
        password_status: false,
        email_cache: "",
        prefix: "http://120.27.10.104:8888",
        titleList: [
          "你不知道的事",
          "永远发生在下一时刻",
          "美好即将发生"
        ]
      },
      created() {
        let self = this;
        document.addEventListener("click", function (e) {
          if (self.cache_status === true) {
            self.mouse_x = e.clientX;
            self.mouse_y = e.clientY;
            self.cache_click_position();
          }
        });

      },
      mounted() {
        this.loop_title();
        var timer = setInterval(
          function() {
            console.log(1);
            if (document.getElementsByClassName('v-modal')[0]){
              // clearInterval(timer)
              document.getElementsByClassName('v-modal')[0].style.cssText = "z-index: 0 !important;"
            }
          },
          300
        )
      },
      watch: {
      },
      methods: {
        inputCheck() {
          // console.log(this.email, this.password);
          let regexp_email = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
          let regexp_nick_name = /[\u4e00-\u9fa5a-zA-Z0-9_]{4,16}/;
          let regexp_password = /^[a-zA-Z0-9_.@&]{6,20}$/;
          if (!regexp_email.test(this.email)) {
            this.email_status = false;
          } else {
            this.email_status = true;
          }
          if (!regexp_nick_name.test(this.nick_name)) {
            this.nick_name_status = false;
          } else {
            this.nick_name_status = true;
          }
          if (!regexp_password.test(this.password)) {
            this.password_status = false;
          } else {
            this.password_status = true;
          }
        },
        open_cache(c) {
          this.loading = true;
          if (this.cache_image === null) {
            this.get_new_cache(1);
          } else {
            this.get_image_x_y_position();
          }
        },
        get_image_x_y_position() {
          let self = this;
          self.loading = true;
          setTimeout(function () {
            let box = document.getElementById("cache_image");
            let pos = box.getBoundingClientRect();
            self.cache_x = pos.left;
            self.cache_y = pos.top;
            self.cache_status = true;
          }, 300)
        },
        refresh_cache(self) {
          this.loading_image = true;
          this.get_new_cache(2);
        },
        get_new_cache(v) {
          if (this.err_no > 5) {
            this.cache_mode = "2"
          }
          this.loading = true;
          this.loading_image = true;
          const url = `${this.prefix}/apiUser/imageCache/?mode=${this.cache_mode}`;
          fetch(url, {
            method: 'GET',
            mode: 'cors',
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            }
          })
            .then(resp => resp.json())
            .then(json => {
              if (json.code !== 200) {
                this.$message({
                  message: json.message,
                  type: 'warning'
                })
              } else {
                this.cache_image = `data:image/png;base64,${json.data.label1}`;
                this.cache_uuid = json.data.label2;
                this.label1 = json.data.label4;
                this.label2 = json.data.label5;
                this.cache_text = json.data.label3;
                this.loading_image = false;
                this.get_image_x_y_position();
                
              }
            })

        },
        cache_click_position() {
          this.loading = true;
          if (this.mouse_x < this.cache_x || this.mouse_x > this.cache_x + this.label1 || this.mouse_y < this.cache_y || this.mouse_y > this.cache_y + this.label2) {
            this.$message({
              message: `请点击图片范围`,
              type: 'warning'
            });
            return
          }
          let x = parseInt(String(this.mouse_x - this.cache_x));
          let y = parseInt(String(this.mouse_y - this.cache_y));
          // 开始认证
          const url = `${this.prefix}/apiUser/imageCache/?ck=${this.cache_uuid}&offset_x=${x}&offset_y=${y}`;
          fetch(url, {
            method: 'GET',
            mode: 'cors',
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            }
          })
            .then(resp => resp.json())
            .then(json => {
              if (json.code !== 200) {
                this.$message({
                  message: `${json.message} 请重新认证`,
                  type: 'warning'
                });
                this.get_new_cache(3);
              } else {
                let uuid_ = json.data.uuid;
                this.success_uuid = uuid_; //  以防再次验证
                this.dialogVisible = false;
                this.cache_status = false;
                this.true_register();
              }
            })
          // // 认证成功 携带参数登陆
          // console.log(`x: ${x} y: ${y}`)
        },
        handleClose() {
          this.cache_status = false;
          this.loading = false;
          this.dialogVisible = false;
          let self = this;
        },
        email_input() {
          if (this.cache !== true) {
            document.getElementById("get_cap").removeAttribute("hidden")
          }
        },
        get_cache() {
          document.getElementById("get_cap").setAttribute("hidden", true);
          let email = this.email;
          if (email.length < 6) {
            this.$message({
              message: '邮箱格式不正确',
              type: 'error'
            });
            document.getElementById("get_cap").removeAttribute("hidden")
            return
          }
          this.cache = true;
          const url = `${this.prefix}/apiUser/emailCache/`;
          let regexp = /.*csrftoken=([^;.]*).*$/;
          let xCSRF = document.cookie.match(regexp) === null ? null : document.cookie.match(regexp)[1]
          fetch(url, {
            method: 'POST',
            mode: 'cors',
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded',
              'X-CSRFToken': xCSRF
            },
            body: `email=${email}`,
          })
            .then(resp => resp.json())
            .then(json => {
              if (json.code !== 200) {
                this.$message({
                  message: json.message,
                  type: 'warning'
                });
                document.getElementById("get_cap").removeAttribute("hidden")
              } else {
                this.$message({
                  message: json.message,
                  type: 'success'
                });
              }
            })
        },
        // 登录按钮
        mini_register() {
          if (!(this.email_status && this.password_status && this.nick_name)) {
            this.$message({
              message: '输入的格式不合规 规则请参照字段说明或联系作者',
              type: 'warning'
            });
            return
          }
          localStorage.removeItem('cookie');
          this.cookie = false;
          if (this.success_uuid === null) {
            // 图片验证
            this.dialogVisible = true;
            this.open_cache(10);
          } else {
            this.true_register();
          }
        },
        true_register() {
          this.loading = true;
          let email = this.email;
          let password = this.password;
          let nick_name = this.nick_name;
          let email_cache = this.email_cache;
          const url = `${this.prefix}/apiUser/users/?uuid=${this.success_uuid}`;
          let regexp = /.*csrftoken=([^;.]*).*$/;
          let xCSRF = document.cookie.match(regexp) === null ? null : document.cookie.match(regexp)[1]
          fetch(url, {
            method: 'POST',
            mode: 'cors',
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded',
              'X-CSRFToken': xCSRF
            },
            body: `email=${email}&password=${password}&nick_name=${nick_name}&cache=${email_cache}`,
          })
            .then(resp => resp.json())
            .then(json => {
              if (json.code !== 200) {
                this.$message({
                  message: json.message,
                  type: 'warning'
                });
                this.loading = false;
              } else {
                this.$message({
                  message: `${json.message}`,
                  type: 'success'
                });
                document.location = '/pages/sign-in.html/'
              }
            })
        },
        loop_title() {
          let self = this;
          setInterval(function () {
            pop_title = self.titleList[0];
            self.titleList = self.titleList.slice(1).concat([pop_title]);
            document.getElementById("show_title").innerText = pop_title;
          }, 3000)
        }
      }
    })
  </script>
  <script src="https://myhkw.cn/api/player/1636018876119" id="myhk" key="1636018876119" m="1"></script>
</body>

</html>